<template>
  <div class="main">
    <govheader title="化工产业大脑 · 数据共享" @zfNameflagChange="zfNameflagChange"></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" style="margin: 10px auto 0" :gutter="20" v-if="zfNameflag">
      <el-col :span="8" class="content-left">
        <el-col class="box sbgh">
          <div class="title">
            <p>园区接入情况</p>
          </div>
          <div class="content-body" style="margin-bottom: 15px;">
            <el-row
              type="flex"
              justify="space-around"
              class="content-body-left"
              style="margin-top: 10px;width: 70%"
            >
              <el-col :span="11" class="situation">
                <div>
                  <img src="../../../../assets/img/industry/园区@2x.png" width="74" height="64" alt />
                  {{ allParkNum }}
                </div>
                <div>园区总数</div>
              </el-col>
              <el-col :span="11" class="situation">
                <div>
                  <img src="../../../../assets/img/industry/接入@2x.png" width="74" height="64" alt />
                  {{ parkNum }}
                </div>
                <div>接入园区总数</div>
              </el-col>
            </el-row>
            <div class="content-body-right" style="width: 30%">
              <div id="accessRate" style="width: 100%; height: 140px;margin-top: 10px;"></div>
            </div>
          </div>
          <el-col class="connected">接入园区</el-col>
          <div style="position: relative">
            <div id="map" style="width: 100%; height: 560px"></div>
            <div class="legend-body">
              <div class="legend-content">
                <div class="legend-point" style="background: #008DDD"></div>
                <div class="legend-title">已接入</div>
              </div>
              <div class="legend-content">
                <div class="legend-point" style="background: #9577D3"></div>
                <div class="legend-title">未接入</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col :span="8" class="content-center">
        <div class="area">
          <div class="areaBox areaBox1">
            <div>省经信厅</div>
            <div class="ball"></div>
          </div>
          <div class="areaBox areaBox2">
            <div>省应急管理厅</div>
            <div class="ball"></div>
          </div>
          <div class="areaBox areaBox3">
            <div>省自然资源厅</div>
            <div class="ball"></div>
          </div>
          <div class="areaBox areaBox4">
            <div>化工园区</div>
            <div class="ball"></div>
          </div>
          <div class="areaBox areaBox5">
            <div>省生态环境厅</div>
            <div class="ball"></div>
          </div>
          <div class="areaBox areaBox6">
            <div>省能源局</div>
            <div class="ball"></div>
          </div>
          <div class="areaBox areaBox7">
            <div>化工企业</div>
            <div class="ball"></div>
          </div>
          <div class="areaBox areaBox8">
            <div>省交通运输厅</div>
            <div class="ball"></div>
          </div>
        </div>
        <div class="huiju">
          <div>
            <div>
              <animate-number
                class="font2"
                from="0"
                :to="allDataSum"
                :key="allDataSum"
                duration="5000"
                from-color="#1492FF"
                to-color="#1492FF"
              ></animate-number>
              <span>&nbsp;条</span>
            </div>
            <div style="font-weight:600;font-size: 16px">累计汇聚数据</div>
          </div>
          <div>
            <div>
              <animate-number
                class="font2"
                from="0"
                :to="todayDataSum"
                :key="todayDataSum"
                duration="5000"
                from-color="#1492FF"
                to-color="#1492FF"
              ></animate-number>
              <span>&nbsp;条</span>
            </div>
            <div style="font-weight:600;font-size: 16px">今日实时汇聚</div>
          </div>
        </div>
        <div class="box" style="margin-top: 10px">
          <div class="title" style="padding-left: 5px">
            <p>数据汇聚趋势</p>
          </div>
          <div class="content-body">
            <div class="tabs" style="width: fit-content; float: right">
              <div :class="active2 === 0 ? 'selectActive' : ''" @click="active2Click(0)">月</div>
              <div
                :class="active2 === 1 ? 'selectActive' : ''"
                @click="active2Click(1)"
                style="border-left: 1px solid #7db2d0"
              >周</div>
              <div
                :class="active2 === 2 ? 'selectActive' : ''"
                @click="active2Click(2)"
                style="border-left: 1px solid #7db2d0"
              >天</div>
            </div>
            <div id="convergence" style="width: 100%; height: 188px"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right">
        <el-col class="box" style="margin-bottom:20px">
          <div class="title">
            <p>企业接入情况</p>
          </div>
          <div class="content-body" style="border-radius: 5px; margin-top: 3px;margin-bottom: 15px">
            <el-row
              type="flex"
              justify="space-around"
              class="content-body-left"
              style="margin-top: 10px;width: 70%"
            >
              <el-col :span="11" class="situation">
                <div>
                  <img src="../../../../assets/img/industry/化工企业@2x.png" width="74" height="64" alt />
                  {{ chemicalEnt }}
                </div>
                <div>规上化工企业总数</div>
              </el-col>
              <el-col :span="11" class="situation">
                <div>
                  <img src="../../../../assets/img/industry/接入@2x.png" width="74" height="64" alt />
                  {{ matchEnt }}
                </div>
                <div>接入企业总数</div>
              </el-col>
            </el-row>
            <div class="content-body-right" style="width: 30%;margin-top: 10px;">
              <div id="enterpriseAccess" style="width: 100%; height: 140px"></div>
            </div>
          </div>
        </el-col>
        <el-col class="box" style="margin-bottom:20px">
          <div class="title">
            <p>数据来源占比</p>
          </div>
          <div class="content-body" style="margin-top: 3px">
            <el-col>
              <div id="proportion" style="width: 60%; height: 232px;float:left"></div>
              <div class="enterprise-body">
                <div
                  class="enterprise-content"
                  v-for="(item,index) in enterpriseCount"
                  :key="index"
                >
                  <div class="enterprise-color" :style="{background: item.color}"></div>
                  <div class="enterprise-type">{{item.name}}</div>
                  <div class="enterprise-count">{{item.per}}%</div>
                </div>
              </div>
            </el-col>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">
            <p>数据汇聚实时清单</p>
          </div>
          <div class="content-body" style="margin-top: 8px">
            <div id="tableColor">
              <el-table
                ref="table"
                :data="tableData"
                style="width: 100%"
                height="212"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '6px 0', height: '36px' }"
                stripe
                :row-class-name="tableRowClassName"
              >
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column property="tableName" :show-overflow-tooltip="true" label="数据项"></el-table-column>
                <el-table-column
                  property="dataReportingQty"
                  width="80"
                  :show-overflow-tooltip="true"
                  label="条数"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span
                      style="font-weight: 600;
                                background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;"
                    >{{scope.row.dataReportingQty}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  property="dataReportingTime"
                  width="200"
                  :show-overflow-tooltip="true"
                  label="接入时间（最新100条）"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
const echarts = require('echarts')
export default {
  name: 'zfDataSharing',
  components: { govheader, govnavigation },
  data () {
    return {
      zfNameflag: true,
      year: '',
      center: '',
      center2: '',
      allParkNum: '',
      parkNum: '',
      parkList: [],
      parkJson: {
        杭州市: { matchParkList: [], disMatchParkList: [], dataIndex: '' },
        宁波市: { matchParkList: [], disMatchParkList: [], dataIndex: '' },
        温州市: { matchParkList: [], disMatchParkList: [], dataIndex: '' },
        嘉兴市: { matchParkList: [], disMatchParkList: [], dataIndex: '' },
        湖州市: { matchParkList: [], disMatchParkList: [], dataIndex: '' },
        绍兴市: { matchParkList: [], disMatchParkList: [], dataIndex: '' },
        金华市: { matchParkList: [], disMatchParkList: [], dataIndex: '' },
        衢州市: { matchParkList: [], disMatchParkList: [], dataIndex: '' },
        舟山市: { matchParkList: [], disMatchParkList: [], dataIndex: '' },
        台州市: { matchParkList: [], disMatchParkList: [], dataIndex: '' },
        丽水市: { matchParkList: [], disMatchParkList: [], dataIndex: '' }
      },
      option1Data: 0,
      option3Data: [
        {
          xAxis3Data: [],
          series3Data: []
        },
        {
          xAxis3Data: [],
          series3Data: []
        },
        {
          xAxis3Data: [],
          series3Data: []
        }
      ],
      option6Data: 0,
      allDataSum: 0,
      todayDataSum: 0,
      chemicalEnt: '',
      matchEnt: '',
      tableData: [],
      active2: 0,
      myChart1: '',
      option1: '',
      myChart2: '',
      option2: '',
      myChart3: '',
      option3: '',
      myChart6: '',
      option6: '',
      myChart7: '',
      option7: '',
      echarts1Interval: null,
      echarts6Interval: null,
      enterpriseCount: []
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  mounted () {
    let _this = this
    this.year = new Date().getFullYear() - 1
    this.getConvergence()
    this.getProportion()
    this.$http
      .post(`/home/government/govDataShare/dataShare`, {})
      .then(({ data: res }) => {
        this.tableData = res.data.realTimeDataList
        this.allParkNum = res.data.allParkNum
        this.parkNum = res.data.parkNum
        this.option1Data = res.data.parkMatchPer
        this.option6Data = res.data.entMatchPer
        let map1 = {}
        res.data.matchParkList.forEach((item) => {
          if (item.cityName !== null) {
            this.parkJson[item.cityName].matchParkList.push(
            '<span style="display:inline-block;width:10px;height:10px;background: #008DDD;border: 2px solid #00E9FF;border-radius: 50%;"></span>&nbsp;' +
              item.parkAbbreviation +
              '&nbsp;&nbsp;'
            )
            switch (item.cityCode) {
              case '330100':
                item.dataIndex = 0
                this.parkJson[item.cityName].dataIndex = 0
                break
              case '330200':
                item.dataIndex = 1
                this.parkJson[item.cityName].dataIndex = 1
                break
              case '330300':
                item.dataIndex = 2
                this.parkJson[item.cityName].dataIndex = 2
                break
              case '330400':
                item.dataIndex = 3
                this.parkJson[item.cityName].dataIndex = 3
                break
              case '330500':
                item.dataIndex = 4
                this.parkJson[item.cityName].dataIndex = 4
                break
              case '330600':
                item.dataIndex = 5
                this.parkJson[item.cityName].dataIndex = 5
                break
              case '330700':
                item.dataIndex = 6
                this.parkJson[item.cityName].dataIndex = 6
                break
              case '330800':
                item.dataIndex = 7
                this.parkJson[item.cityName].dataIndex = 7
                break
              case '330900':
                item.dataIndex = 8
                this.parkJson[item.cityName].dataIndex = 8
                break
              case '331000':
                item.dataIndex = 9
                this.parkJson[item.cityName].dataIndex = 9
                break
              case '331100':
                item.dataIndex = 10
                this.parkJson[item.cityName].dataIndex = 10
                break
            }
            map1[item.parkAbbreviation] = [
              item.longitude,
              item.latitude,
              item.parkCode,
              item.parkName,
              item.dataIndex
            ]
          }
        })
        let map2 = {}
        if (res.data.disMatchParkList.length> 0) {
          res.data.disMatchParkList.forEach((item) => {
          this.parkJson[item.cityName].disMatchParkList.push(
            '<span style="display:inline-block;width:10px;height:10px;background: #9577D3;border: 2px solid #5E2DC;border-radius: 50%;"></span>&nbsp;' +
              item.parkAbbreviation +
              '&nbsp;&nbsp;'
          )
          switch (item.cityCode) {
            case '330100':
              item.dataIndex = 0
              this.parkJson[item.cityName].dataIndex = 0
              break
            case '330200':
              item.dataIndex = 1
              this.parkJson[item.cityName].dataIndex = 1
              break
            case '330300':
              item.dataIndex = 2
              this.parkJson[item.cityName].dataIndex = 2
              break
            case '330400':
              item.dataIndex = 3
              this.parkJson[item.cityName].dataIndex = 3
              break
            case '330500':
              item.dataIndex = 4
              this.parkJson[item.cityName].dataIndex = 4
              break
            case '330600':
              item.dataIndex = 5
              this.parkJson[item.cityName].dataIndex = 5
              break
            case '330700':
              item.dataIndex = 6
              this.parkJson[item.cityName].dataIndex = 6
              break
            case '330800':
              item.dataIndex = 7
              this.parkJson[item.cityName].dataIndex = 7
              break
            case '330900':
              item.dataIndex = 8
              this.parkJson[item.cityName].dataIndex = 8
              break
            case '331000':
              item.dataIndex = 9
              this.parkJson[item.cityName].dataIndex = 9
              break
            case '331100':
              item.dataIndex = 10
              this.parkJson[item.cityName].dataIndex = 10
              break
          }
          map2[item.parkAbbreviation] = [
            item.longitude,
            item.latitude,
            item.parkCode,
            item.parkName,
            item.dataIndex
          ]
        })
          
        }
        this.center = map1
        this.center2 = map2
        for (let i in this.parkJson) {
          this.parkList.push({
            name: i,
            matchParkList: this.parkJson[i].matchParkList.join(
              '<br/>&nbsp;&nbsp;&nbsp;'
            ),
            disMatchParkList: this.parkJson[i].disMatchParkList.join(
              '<br/>&nbsp;&nbsp;&nbsp;'
            ),
            dataIndex: this.parkJson[i].dataIndex
          })
        }
        this.allDataSum = res.data.allDataSum
        this.todayDataSum = res.data.todayDataSum
        this.option3Data[0].xAxis3Data = this.option3.xAxis.data =
          res.data.monthList
        this.option3Data[0].series3Data = this.option3.series[0].data =
          res.data.monthValueList
        this.option3Data[1].xAxis3Data = res.data.weekList
        this.option3Data[1].series3Data = res.data.weekValueList
        this.option3Data[2].xAxis3Data = res.data.dayList
        this.option3Data[2].series3Data = res.data.dayValueList
        this.chemicalEnt = res.data.chemicalEnt
        this.matchEnt = res.data.matchEnt
        this.option7.series[0].data = res.data.sourceList
        let colorList = [
          '#0487ED',
          '#0FD5F9',
          '#0666E8',
          '#3EB076',
          '#A2FFD0',
          '#C1C049',
          '#FFCD5E',
          '#AE42EA'
        ]
        this.enterpriseCount = res.data.sourcePerList.map((item, index) => {
          return {
            ...item,
            color: colorList[index]
          }
        })
        clearInterval(_this.intervalId)
        this.$refs.table.bodyWrapper.scrollTop = 0
        this.getright_table()
        this.$nextTick(() => {
          this.getAccessRate()
          this.renderMyChart()
          this.getEnterpriseAccess()
          this.myChart3.setOption(this.option3)
          this.myChart7.setOption(this.option7)
        })
      })
      .catch(() => {})
  },
  beforeDestroy () {
    let _this = this
    clearInterval(_this.echarts1Interval)
    clearInterval(_this.echarts6Interval)
    clearInterval(_this.startCharts2)
    clearInterval(_this.startCharts3)
    clearInterval(_this.startCharts7)
  },
  methods: {
    zfNameflagChange (val) {
      this.zfNameflag = val
    },
    getright_table () {
      var isScroll = true
      var waitFlag = 0
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    tableRowClassName ({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'statistics-warning-row'
      } else {
        return ''
      }
    },
    active2Click (val) {
      this.active2 = val
      this.option3.xAxis.data = this.option3Data[val].xAxis3Data
      this.option3.series[0].data = this.option3Data[val].series3Data
      this.myChart3.setOption(this.option3)
    },
    getAccessRate () {
      let _this = this
      this.myChart1 = echarts.init(document.getElementById('accessRate'))
      let angle = 0
      let value = _this.option1Data

      function getCirlPoint (x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
        return {
          x: x1,
          y: y1
        }
      }

      this.option1 = {
        title: {
          text: '{a|' + value + '}{c|%}\n{d|园区接入率}',
          x: 'center',
          y: '50px',
          textStyle: {
            rich: {
              a: {
                fontSize: 20,
                color: '#4FC0FF'
              },
              c: {
                fontSize: 16,
                color: '#4FC0FF'
                // padding: [5,0]
              },
              d: {
                fontSize: 10,
                color: '#ffffff',
                lineHeight: 16
              }
            }
          }
        },
        series: [
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2
              let y0 = api.getHeight() / 2
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85
              let point = getCirlPoint(x0, y0, r, 90 + -angle)
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#0CD3DB', // 粉
                  fill: '#0CD3DB'
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5', // 绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2
              let y0 = api.getHeight() / 2
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85
              let point = getCirlPoint(x0, y0, r, 270 + -angle)
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#0CD3DB', // 绿
                  fill: '#0CD3DB'
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            type: 'pie',
            radius: ['68%', '55%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: value,
                name: '',
                itemStyle: {
                  normal: {
                    color: '#4FC0FF'
                  }
                }
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#5F83FF'
                  }
                }
              }
            ]
          },
          {
            name: '',
            type: 'gauge',
            radius: '58%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 8,
            hoverAnimation: true,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 60,
              lineStyle: {
                width: 5,
                color: '#061740'
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 0,
                name: ''
              }
            ]
          }
        ]
      }
      this.myChart1.setOption(this.option1)

      function draw () {
        angle = angle + 3
        _this.myChart1.setOption(_this.option1, true)
        // window.requestAnimationFrame(draw);
      }
      setTimeout(() => {
        _this.echarts1Interval = setInterval(function () {
          draw()
        }, 50)
      }, 1000)
    },
    getEnterpriseAccess () {
      let _this = this
      this.myChart6 = echarts.init(document.getElementById('enterpriseAccess'))
      let angle = 0
      let value = _this.option6Data

      function getCirlPoint (x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
        return {
          x: x1,
          y: y1
        }
      }
      this.option6 = {
        title: {
          text: '{a|' + value + '}{c|%}\n{d|企业接入率}',
          x: 'center',
          y: '50px',
          textStyle: {
            rich: {
              a: {
                fontSize: 20,
                color: '#4FC0FF'
              },
              c: {
                fontSize: 16,
                color: '#4FC0FF'
                // padding: [5,0]
              },
              d: {
                fontSize: 10,
                color: '#ffffff',
                lineHeight: 16
              }
            }
          }
        },
        series: [
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2
              let y0 = api.getHeight() / 2
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85
              let point = getCirlPoint(x0, y0, r, 90 + -angle)
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#0CD3DB', // 粉
                  fill: '#0CD3DB'
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5', // 绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2
              let y0 = api.getHeight() / 2
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85
              let point = getCirlPoint(x0, y0, r, 270 + -angle)
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#0CD3DB', // 绿
                  fill: '#0CD3DB'
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            type: 'pie',
            radius: ['68%', '55%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: value,
                name: '',
                itemStyle: {
                  normal: {
                    color: '#4FC0FF'
                  }
                }
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#5F83FF'
                  }
                }
              }
            ]
          },
          {
            name: '',
            type: 'gauge',
            radius: '58%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 8,
            hoverAnimation: true,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 60,
              lineStyle: {
                width: 5,
                color: '#061740'
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 0,
                name: ''
              }
            ]
          }
        ]
      }
      this.myChart6.setOption(this.option6)

      function draw () {
        angle = angle + 3
        _this.myChart6.setOption(_this.option6, true)
        // window.requestAnimationFrame(draw);
      }
      setTimeout(() => {
        _this.echarts6Interval = setInterval(function () {
          draw()
        }, 50)
      }, 1000)
    },
    // 浙江省地图
    renderMyChart () {
      let _this = this
      this.myChart2 = echarts.init(document.getElementById('map'))
      let uploadedDataURL = require('../zhejiang.json')
      let scatterData1 = []
      let scatterData2 = []
      for (let item in this.center) {
        scatterData1.push(this.center[item].concat(item))
      }
      for (let item in this.center2) {
        scatterData2.push(this.center2[item].concat(item))
      }
      echarts.registerMap('js', uploadedDataURL)
      this.option2 = {
        // title: {
        //   text: "浙江省化工产业分布",
        //   top: "10px",
        //   textStyle: {
        //     width: "100%",
        //     color: "#1c4ca1",
        //     "font-weight": 700,
        //   },
        // },
        tooltip: {
          trigger: 'item',
          extraCssText: 'z-index: 9',
          backgroundColor: 'transparent',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#00E4FF'
          },
          formatter: function (para) {
            if (para.seriesType === 'map') {
              let str = `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5)">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>`
              if (
                para.data.matchParkList !== '' &&
                para.data.disMatchParkList !== ''
              ) {
                str +=
                  '<div style="color;#EEBF43;text-align: center;font-weight: 600">' +
                  para.name +
                  '</div>' +
                  '<div style="color:#fcaf17;font-weight:600;background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">&nbsp;已接入:</div>&nbsp;&nbsp;&nbsp;' +
                  para.data.matchParkList +
                  '<div style="color:red;;font-weight: 600;background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">&nbsp;未接入:</div>&nbsp;&nbsp;&nbsp;' +
                  para.data.disMatchParkList +
                  '</div>'
              } else if (para.data.matchParkList === '') {
                str +=
                  '<div style="color;#EEBF43;text-align: center;font-weight: 600">' +
                  para.name +
                  '</div>' +
                  '<div style="color:red;;font-weight: 600;background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">&nbsp;未接入:</div>&nbsp;&nbsp;&nbsp;' +
                  para.data.disMatchParkList
              } else if (para.data.disMatchParkList === '') {
                str +=
                  '<div style="color;#EEBF43;text-align: center;font-weight: 600">' +
                  para.name +
                  '</div>' +
                  '<div style="color:#fcaf17;;font-weight: 600;background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">&nbsp;已接入:</div>&nbsp;&nbsp;&nbsp;' +
                  para.data.matchParkList
              }
              ;+`</div>`
              return str
            } else {
              return ''
            }
          }
        },
        geo: [
          {
            map: 'js',
            aspectScale: 0.9,
            roam: true, // 是否允许缩放
            layoutSize: '100%',
            layoutCenter: ['50%', '55%'],
            zoom: 0.9,
            itemStyle: {
              areaColor: '#113D8D',
              borderColor: 'rgb(27, 172, 255)',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005ddc'
              },
              label: {
                show: true,
                color: '#ffffff'
              }
            },
            label: {
              show: true,
              color: '#ffffff'
            },
            zlevel: 3
          }
        ],
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: this.parkList
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbol: 'circle',
            symbolSize: 6,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'fill',
              scale: 3
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: 'rgb(0, 141, 221)'
              }
            },
            label: {
              normal: {
                formatter: function (para) {
                  return para.data[5]
                },
                position: 'right',
                color: '#333333',
                borderColor: '#005DDC',
                borderWidth: 1,
                borderType: 'solid',
                padding: 5,
                backgroundColor: 'rgba(255, 255, 255, 1)',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true
              },
              itemStyle: {
                color: 'rgb(255, 155, 55)',
                borderColor: 'rgb(255, 155, 55)',
                borderWidth: 6
              }
            },
            data: scatterData1,
            zlevel: 10
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            itemStyle: {
              normal: {
                color: '#9577D3'
              }
            },
            label: {
              normal: {
                formatter: function (para) {
                  return para.data[5]
                },
                position: 'right',
                color: '#333333',
                borderColor: '#005DDC',
                borderWidth: 1,
                borderType: 'solid',
                padding: 5,
                backgroundColor: 'rgba(255, 255, 255, 1)',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            symbol: 'circle',
            symbolSize: 6,
            data: scatterData2,
            zlevel: 9
          }
        ]
      }
      this.myChart2.on('click', (params) => {
        if (
          params.componentType === 'series' &&
          params.seriesType === 'effectScatter'
        ) {
          this.$router.push({
            name: 'zfParkOverviewDetailTwo',
            query: {
              parkCode: params.data[2],
              parkName: params.data[3],
              longitude: params.data[0],
              latitude: params.data[1],
              year: this.year
            }
          })
        }
      })
      this.myChart2.setOption(this.option2)
      this.autoPlay1(_this.myChart2, _this.option2, 'startCharts2')
    },
    getConvergence () {
      let _this = this
      this.myChart3 = echarts.init(document.getElementById('convergence'))
      this.option3 = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 条',
          confine: true
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 8,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          top: '15%',
          left: '3%',
          right: '6%',
          bottom: '5%',
          containLabel: true
        },
        color: ['rgba(0, 231, 224, .4)'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#254E9B', // 左边线的颜色
              width: '1' // 坐标线的宽度
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#52CCFF'
            }
          },
          splitLine: {
            show: true, // 网格线是否显示
            //  改变样式
            lineStyle: {
              color: 'rgba(255,255,255,.1)' // 修改网格线颜色
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '数据量/条',
          nameTextStyle: {
            color: '#ffffff'
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#254E9B', // 左边线的颜色
              width: '1' // 坐标线的宽度
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#BAF0FF'
            }
          },
          splitLine: {
            show: true, // 网格线是否显示
            //  改变样式
            lineStyle: {
              color: 'rgba(255,255,255,.1)' // 修改网格线颜色
            }
          }
        },
        series: [
          {
            data: [],
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            areaStyle: {
              normal: {
                // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(80,141,255,0.39)'
                  },
                  {
                    offset: 0.34,
                    color: 'rgba(56,155,255,0.25)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(38,197,254,0.00)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#0E1117',
                borderColor: '#00FCFF',
                borderWidth: 2,
                lineStyle: {
                  color: '#00FCFF'
                }
              }
            }
          }
        ]
      }
      this.myChart3.setOption(this.option3)
      this.autoPlay(_this.myChart3, _this.option3, 'startCharts3')
    },
    getProportion () {
      let _this = this
      this.myChart7 = echarts.init(document.getElementById('proportion'))
      this.option7 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'item',
          confine: true,
          extraCssText: 'z-index: 100'
        },
        color: [
          '#0487ED',
          '#0FD5F9',
          '#0666E8',
          '#3EB076',
          '#A2FFD0',
          '#C1C049',
          '#FFCD5E',
          '#AE42EA'
        ],
        // legend: {
        //   right: 10,
        //   orient: "vertical",
        //   type: "scroll",
        //   icon: 'rect',
        //   itemWidth: 7,
        //   itemHeight: 7,
        //   textStyle: {
        //     color: '#ffffff'
        //   }
        // },
        series: [
          {
            type: 'pie',
            radius: [30, 100],
            center: ['40%', '50%'],
            roseType: 'area',
            label: {
              // 标识
              normal: {
                show: false,
                // position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
      this.myChart7.setOption(this.option7)
      this.autoPlay(_this.myChart7, _this.option7, 'startCharts7')
    },
    // 自动播放
    autoPlay (myChart, option, timer) {
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        if (param.componentType === 'series') {
          flag = false
          clearInterval(timer)
          // 取消之前高亮图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex
          })

          charPiecurrentIndex = param.dataIndex
          //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })

          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
        }
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      timer = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 2000)
          flag = true
        }
      })
    },
    // 地图自动播放
    autoPlay1 (myChart, option, timer) {
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        if (
          (param.componentType === 'series' &&
            param.seriesType === 'scatter') ||
          (param.componentType === 'series' &&
            param.seriesType === 'effectScatter')
        ) {
          flag = false
          clearInterval(timer)
          // 取消之前高亮图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex
          })

          charPiecurrentIndex = param.data[4]
          //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.data[4]
          })

          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.data[4]
          })
        }
        if (param.componentType === 'series' && param.seriesType === 'map') {
          flag = false
          clearInterval(timer)
          // 取消之前高亮图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex
          })

          charPiecurrentIndex = param.data.dataIndex
          //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.data.dataIndex
          })

          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.data.dataIndex
          })
        }
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      timer = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 2000)
          flag = true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background-size: 100% 100%;
  background: #041565;
}
.box {
  padding-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background-image: url('../../../../assets/img/industry/框尺寸1.png');
  background-size: 100% 100%;
}
.title {
  width: 270px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 14px;
  background-image: url('../../../../assets/img/industry/小标题背景1.png');
  background-size: 100% 100%;
  color: #ffffff;

  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.content {
  padding: 5px 0 0;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 55%;
  }
  .content-body-right {
    width: 45%;
  }
}
.content-body-left-top {
  font-size: 12px;
}
.tabs {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #7db2d0;
    padding: 0 7px;
    cursor: pointer;
  }
}
.selectActive {
  color: #00a3ff !important;
  font-weight: 600;
}
.content-body-left-box {
  width: 48%;
  margin: 1%;
  float: left;
  margin: 10px auto;
}
.content-body-left-bottom {
  color: rgb(115, 188, 235);
  font-weight: 600;
  font-size: 18px;
  margin: 15px auto;
}
.content-body-top,
.content-body-bottom {
  width: 100%;
}
.colorBox {
  height: 54px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 12px;
  color: #ffffff;
}
.box1 {
  background-image: url('../../../../assets/img/zf/12.png');
}
.box2 {
  background-image: url('../../../../assets/img/zf/11.png');
}
.box3 {
  background-image: url('../../../../assets/img/zf/10.png');
}
.overview {
  height: 55px;
  line-height: 55px;
}
.enterprise-box {
  background-color: rgb(219, 239, 255);
  border-radius: 15px;
  overflow: hidden;
  padding: 10px;
  > div:nth-child(1) {
    float: left;
    color: #1c4ca1;
  }
  > div:nth-child(2) {
    float: right;
    color: #00a3ff;
  }
}
.situation {
  background-image: url('../../../../assets/img/industry/小背景框1@2x.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  > div:first-child {
    font-size: 25px;
    color: #ffffff;
    line-height: 70px;
    font-weight: 600;
    margin-top: 20px;

    background: -webkit-linear-gradient(90deg, #ffca12, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  > div:last-child {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #e5fbff;
    height: 50px;
    line-height: 50px;
  }
}
.legend-body {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 20%;
  height: 80px;
  .legend-content {
    width: 100%;
    height: 16px;
    margin-bottom: 5px;
    .legend-point {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      float: left;
      margin-right: 5px;
      margin-top: 4px;
    }
    .legend-title {
      font-size: 12px;
      color: #00e4ff;
      float: left;
      line-height: 16px;
    }
    .legend-value {
      float: right;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
.content-body /deep/ .el-table th {
  background-color: #022b7e !important;
  color: #00e4ff;
  font-size: 12px;
  padding: 6px 0;
}
.content-body /deep/ .el-table td {
  color: #baf0ff;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
/deep/ .el-table th.is-leaf,
.el-table td {
  border: none !important;
}
/deep/ .el-table td,
.el-table th.is-leaf {
  border: none !important;
}
/deep/ .el-table::before {
  //去掉最下面的那一条线
  height: 0px;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
#tableColor /deep/ .el-table__body {
  width: 100% !important;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #082560 !important;
}
.content-body
  #tableColor
  /deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td {
  background: none;
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  display: none;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.connected {
  height: 15px;
  text-align: center;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  background-image: url('../../../../assets/img/industry/标题框2@2x.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content-img {
  width: 85%;
  margin: 0 auto;
  height: 380px;
  background-image: url('../../../../assets/img/zf/14.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.area {
  width: 85%;
  margin: 0 auto;
  height: 390px;
  background-image: url('../../../../assets/img/industry/数据共享背景@2x.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.areaBox {
  width: 100px;
  text-align: center;
  position: absolute;
  /* box-shadow: 0px 0px 20px #0000ff5c; */
  .ball {
    width: 70px;
    margin: 0 auto;
    height: 45px;
    background-image: url('../../../../assets/img/industry/数据来源-单个背景@2x.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  > div:first-child {
    font-weight: 600;
    background: -webkit-linear-gradient(90deg, #ffca12, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
  }
}

/* 6个球 总共运行一圈的时间为24秒  每个球的间隔时间为 4秒*/
.areaBox1 {
  left: 90px;
  top: 30px;
  animation: mymove1 8s alternate linear infinite;
}
.areaBox2 {
  left: 230px;
  top: 30px;
  animation: mymove1 8s alternate linear 0.5s infinite;
}
.areaBox3 {
  left: -20px;
  top: 80px;
  animation: mymove2 8s alternate linear infinite;
}
.areaBox4 {
  left: 160px;
  top: 80px;
  animation: mymove2 8s alternate linear 0.5s infinite;
}
.areaBox5 {
  left: 340px;
  top: 80px;
  animation: mymove2 8s alternate linear 0.25s infinite;
}
.areaBox6 {
  left: 50px;
  top: 130px;
  animation: mymove3 8s alternate linear infinite;
}
.areaBox7 {
  left: 270px;
  top: 130px;
  animation: mymove3 8s alternate linear 0.5s infinite;
}
.areaBox8 {
  left: 160px;
  top: 160px;
  animation: mymove4 8s alternate linear infinite;
}
/* 在轴上Y的移动 */
@keyframes mymove1 {
  0% {
    top: 30px;
  }
  25% {
    top: 10px;
  }
  50% {
    top: 30px;
  }
  75% {
    top: 10px;
  }
  100% {
    top: 30px;
  }
}
@keyframes mymove2 {
  0% {
    top: 80px;
  }
  25% {
    top: 60px;
  }
  50% {
    top: 80px;
  }
  75% {
    top: 60px;
  }
  100% {
    top: 80px;
  }
}
@keyframes mymove3 {
  0% {
    top: 130px;
  }
  25% {
    top: 110px;
  }
  50% {
    top: 130px;
  }
  75% {
    top: 110px;
  }
  100% {
    top: 130px;
  }
}
@keyframes mymove4 {
  0% {
    top: 160px;
  }
  25% {
    top: 140px;
  }
  50% {
    top: 160px;
  }
  75% {
    top: 140px;
  }
  100% {
    top: 160px;
  }
}
.sbgh {
  background-image: url('../../../../assets/img/industry/sbgh.png');
}
.enterprise-body {
  float: left;
  width: 40%;
  height: 200px;
  padding: 25px 5px;
  color: #ffffff;
}
.enterprise-content {
  width: 100%;
  height: 30px;
  // border-bottom: 1px solid #B2D4F0;
  // border-style: dashed;
  padding: 0px 5px;
}
.enterprise-color {
  width: 10px;
  height: 10px;
  margin-top: 10px;
  float: left;
}
.enterprise-type {
  font-size: 13px;
  // color: #ffffff;
  line-height: 30px;
  float: left;
  margin-left: 12px;
}
.enterprise-count {
  font-size: 14px;
  line-height: 30px;
  float: right;
}
.enterprise-unit {
  font-size: 13px;
  // color: #ffffff;
  line-height: 30px;
  float: right;
}
.huiju {
  overflow: hidden;
  margin-top: -52px;
  > div {
    width: 50%;
    float: left;
    text-align: center;
    color: #ffffff;
    background-image: url('../../../../assets/img/industry/数据背景框@2x.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    > div {
      margin-top: 50px;
      margin-bottom: 10px;
    }
    .font2 {
      color: #1c4ca1;
      font-size: 30px;
      letter-spacing: 2px;
      font-weight: 600;
      background: -webkit-linear-gradient(90deg, #ffca12, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    > span {
      font-size: 16px;
      height: 40px;
      line-height: 40px;
    }
  }
}
/deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
</style>
